<template>
	<div>
		<div class="tl" align="left">
			<span
				:class="{ active: index == active }"
				v-for="(item, index) in depart_list"
				:key="index"
				:data-code="item.code"
				@click="handleClick($event), toggleChange(index)"
				>{{ item.depart_name }}
			</span>
		</div>
	</div>
</template>

<script>
//  科室选择
export default {
	data () {
		return {
			depart_list: [
				{ depart_name: "不限", code: "all" },
				{ depart_name: "放射科", code: "RIS" },
				{ depart_name: "心电科", code: "ECG" },
				{ depart_name: "内镜科", code: "EIS" },
				{ depart_name: "特检科", code: "XIS" }
			],
			activeName: "all",
			active: 0
		};
	},
	computed: {},
	mounted () { },
	methods: {
		toggleChange ( index ) {
			this.active = index;
		},
		handleClick ( $event ) {
			const code = $event.target.getAttribute( "data-code" );
			console.log( code );
			if ( code === "all" ) {
				this.$emit( "getdepartcode", null );
			} else {
				this.$emit( "getdepartcode", code );
			}
		}
	}
};
</script>

<style scoped lang="less">
.tl {
	margin-bottom: 15px;
}
.active {
	color: #0a70b0;
	background: #ffffff;
	border: 1px solid #0a70b0;
	border-radius: 4px;
	padding: 0 5px;
}
span {
	color: #333333;
	font-size: 14px;
	margin-right: 20px;
	width: 50px;
	height: 30px;
	line-height: 30px;
	cursor: pointer;
}
</style>
